<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/styles/chat.css">
    <link rel="stylesheet" href="../static/styles/voice.css" />
    <link rel="stylesheet" href="../static/styles/theme/light.css">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/chat.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        type="text/css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
        crossorigin="anonymous">
    <link rel="stylesheet" href="../static/styles/nav.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="icon" href="../static/images/logo.png" sizes="16x16">

    <title>AI 助手</title>
</head>

<body>
    <main>

        <section class="left-content">
            <div class="logo_items flex">
                <span class="nav_image">
                    <img src="../static/images/logo.png" alt="logo_img">
                </span>
                <span class="logo_name">AI 助手</span>
            </div>
            <!-- 聊天区域 -->
            <div class="chat-column">
                <div class="column-header" onclick="showContent('chat')">
                    <h3>聊天</h3>
                </div>
                <nav class="sidebar locked">
                    <div class="menu_container">
                        <div class="items">
                            <ul class="menu_item">
                                <li class="item">
                                    <a href="#" class="add link flex">
                                        <i class="bx bx-add-to-queue"></i>
                                        <span>新对话</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="chat_container">
                        <div class="items">
                            <ul class="chat_item">
                                <!-- 对话列表 -->
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>

            <div class="learning-column" id="learning-column">
                <div class="column-header">
                    <h3>AI 工具</h3>
                </div>
                <nav class="sidebar locked">
                    <div class="menu_container">
                        <div class="learning-column-learn" onclick="showContent('learning1')">
                            <i class='bx bx-transfer'></i>
                            <span>AI 翻译</span>
                        </div>
                        <div class="learning-column-learn" onclick="showContent('learning2')">
                            <i class='bx bx-search-alt'></i>
                            <span>AI 搜题</span>
                        </div>
                        <div class="learning-column-learn" onclick="showContent('learning3')">
                            <i class='bx bx-volume-full'></i>
                            <span>语音合成</span>
                        </div>
                    </div>
                </nav>
            </div>

        </section>

        <section class="main-content" id="main-content">
            <!-- 聊天-->
            <div class="chat-window" id="chat-window">
                <div id="chat-container">

                    <!--<div class="row m-0 p-2">

                    <div class="col-6 ps-0">

                    </div>
                    <div class="col-6 d-flex justify-content-end align-content-end pe-0">

                    </div>


                </div>-->

                    <div id="container-messages">

                    </div>

                    <div class="pt-3 pb-3" id="chat-control">
                        <div class="input-group ">
                            <input type="text" class="form-control rounded-start-5" placeholder="输入消息"
                                aria-label="Recipient's username" id="chat-input" />
                            <button class="btn btn-outline-secondary" type="button" id="start-btn">
                                <!--语音识别按钮-->
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor">
                                    <circle cx="9" cy="9" r="5" />
                                </svg>
                            </button>
                            <button class="btn btn-outline-secondary rounded-end-5" type="button" id="button-send">

                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                                    class="bi bi-caret-right-fill" viewBox="0 0 18 18">
                                    <path
                                        d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                                </svg>
                            </button>
                            <section class="fixed-box" id="fixed-box">
                                <div class="fixed-main">
                                    <button class="fixed-close" id="close-btn"></button>
                                    <div id="fixed-txt"></div>
                                    <div class="fixed-icon">
                                        <img src="../static/images/voice.png" alt="" />
                                    </div>
                                </div>
                            </section>
                        </div>

                    </div>
                </div>
            </div>
            <div class="chat-window" id="learn1-window" style="display:none;">
                <div id="chat-container-learn1">

                   <div id="container-messages-learn1">
                    <div class="left-message">
                        <p class="m-0">请输入要翻译的文本或选择要识别并翻译的图片</p>
                    </div>
                    </div>
                    <!-- 上传文件和语言选择框并列 -->
                    <div class="input-group-container">
                        <!-- 上传文件输入框 -->
                        <input type="file" class="form-control rounded-start-5" id="image-upload-learn1"
                            accept="image/*">
                        <!-- 语言选择框 -->
                        <div class="language-selection">
                            <select id="language-from" class="form-control">
                                <option value="en">English</option>
                                <option value="zh">中文</option>
                                <option value="spa">Español</option>
                                <!-- 可以根据需要添加更多语言选项 -->
                            </select>
                            <span>to</span>
                            <select id="language-to" class="form-control">
                                <option value="en">English</option>
                                <option value="zh">中文</option>
                                <option value="spa">Español</option>
                                <!-- 可以根据需要添加更多语言选项 -->
                            </select>
                        </div>
                    </div>

                    <div class="pt-3 pb-3" id="chat-control-learn1">
                        <div class="input-group">
                            <!-- 消息输入框 -->
                            <input type="text" class="form-control rounded-start-5" placeholder="输入消息"
                                aria-label="Recipient's username" id="chat-input-learn1" />
                            <button class="btn btn-outline-secondary" type="button" id="start-btn">
                                <!--语音识别按钮-->
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor">
                                    <circle cx="9" cy="9" r="5" />
                                </svg>
                            </button>
                            <!-- 发送按钮 -->
                            <button class="btn btn-outline-secondary rounded-end-5" type="button"
                                id="button-send-learn1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                                    class="bi bi-caret-right-fill" viewBox="0 0 18 18">
                                    <path
                                        d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                                </svg>
                            </button>
                            <section class="fixed-box" id="fixed-box">
                                <div class="fixed-main">
                                    <button class="fixed-close" id="close-btn"></button>
                                    <div id="fixed-txt"></div>
                                    <div class="fixed-icon">
                                        <img src="../static/images/voice.png" alt="" />
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>

                </div>
            </div>

            <div class="chat-window" id="learn2-window" style="display:none;">
                <div id="chat-container-learn2" >
                    <div id="container-messages-learn1">
                        <div class="left-message" style="margin-bottom: 10px;">
                            <p class="m-0">请输入要搜索的题目图片</p>
                        </div>
                        <div id="response" class="m-0" style="border: 1px solid #ccc; border-radius: 10px; padding: 10px; background-color: #e0f7fa;">
                            <!-- 响应信息会显示在这里 -->
                        </div>
                    </div>
                    <!-- 上传文件和语言选择框并列 -->
                    <div class="input-group-container">
                        <!-- 上传文件输入框 -->
                        {#                        <form id="uploadForm">#}
                        {#                            <input type="file" class="form-control rounded-start-5" id="image-upload-learn2"#}
                        {#                                accept="image/*">#}
                        {#                            <button type="submit" class="btn btn-primary w-100">提交</button>#}
                        {#                        </form>#}
                        <div class="input-group-container d-flex mt-3" style="margin-top: 0; margin-bottom: 20px;">
                            <!-- 上传文件输入框 -->
                            <form id="uploadForm" class="d-flex w-100">
                                <input type="file" class="form-control rounded-start-5" id="image-upload-learn2" accept="image/*" style="flex-grow: 1;">
                                <button type="submit" class="btn btn-primary ms-2" style="width: 200px;">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


            <div class="chat-window" id="entertainment1-window" style="display:none;">
            <div id="chat-container-entertainment1" >

                    <!--<div class="row m-0 p-2">

                    <div class="col-6 ps-0">

                    </div>
                    <div class="col-6 d-flex justify-content-end align-content-end pe-0">

                    </div>


                </div>-->

                    <!-- <div id="container-messages-entertainment1">

                    <div class="left-message">
                        <p class="m-0">How can I assist you today?</p>
                    </div>


                </div> -->

                    <div class="pt-3 pb-3" id="chat-control-entertainment1">
                        <div class="input-group ">
                            <input type="text" class="form-control rounded-start-5" placeholder="输入消息"
                                aria-label="Recipient's username" id="chat-input-entertainment1" />
                            <button class="btn btn-outline-secondary" type="button" id="start-btn">
                                <!--语音识别按钮-->
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor">
                                    <circle cx="9" cy="9" r="5" />
                                </svg>
                            </button>
                            <button class="btn btn-outline-secondary rounded-end-5" type="button"
                                id="button-send-entertainment1">

                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                                    class="bi bi-caret-right-fill" viewBox="0 0 18 18">
                                    <path
                                        d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                                </svg>
                            </button>
                            <section class="fixed-box" id="fixed-box">
                                <div class="fixed-main">
                                    <button class="fixed-close" id="close-btn"></button>
                                    <div id="fixed-txt"></div>
                                    <div class="fixed-icon">
                                        <img src="../static/images/voice.png" alt="" />
                                    </div>
                                </div>
                            </section>
                        </div>

                    </div>
                </div>
            </div>

        <div class="chat-window" id="entertainment2-window" style="display:none;">
            <div id="chat-container-entertainment2" >

                    <!--<div class="row m-0 p-2">

                    <div class="col-6 ps-0">

                    </div>
                    <div class="col-6 d-flex justify-content-end align-content-end pe-0">

                    </div>


                </div>-->

                    <!-- <div id="container-messages-entertainment2">

                    <div class="left-message">
                        <p class="m-0">How can I assist you today?</p>
                    </div>


                </div> -->

                    <div class="pt-3 pb-3" id="chat-control-entertainment2">
                        <div class="input-group ">
                            <input type="text" class="form-control rounded-start-5" placeholder="输入消息"
                                aria-label="Recipient's username" id="chat-input-entertainment2" />
                            <button class="btn btn-outline-secondary" type="button" id="start-btn">
                                <!--语音识别按钮-->
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor">
                                    <circle cx="9" cy="9" r="5" />
                                </svg>
                            </button>
                            <button class="btn btn-outline-secondary rounded-end-5" type="button"
                                id="button-send-entertainment2">

                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                                    class="bi bi-caret-right-fill" viewBox="0 0 18 18">
                                    <path
                                        d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                                </svg>
                            </button>
                            <section class="fixed-box" id="fixed-box">
                                <div class="fixed-main">
                                    <button class="fixed-close" id="close-btn"></button>
                                    <div id="fixed-txt"></div>
                                    <div class="fixed-icon">
                                        <img src="../static/images/voice.png" alt="" />
                                    </div>
                                </div>
                            </section>
                        </div>

                    </div>
                </div>
            </div>

        <!-- 语音合成窗口 -->
        <div class="chat-window" id="learn3-window" style="display:none;">
            <div id="chat-container-learn3">
                <div id="container-messages-learn3">
                    <!-- 语音合成控制区域 -->
                    <div class="pt-3 pb-3" id="chat-control-learn3">
                        <!-- 文本输入区域 -->
                        <div class="input-group-container">
                            <textarea class="form-control" id="tts-text" 
                                placeholder="请输入要转换的文本" rows="4"></textarea>
                        </div>

                        <!-- 音色选择和合成按钮 -->
                        <div class="voice-controls mt-3">
                            <select id="voice-type" class="form-select">
                                <option value="BV701_streaming">擎苍</option>
                                <option value="BV123_streaming">阳光青年</option>
                                <option value="BV120_streaming">反卷青年</option>
                                <option value="BV119_streaming">通用赘婿</option>
                                <option value="BV115_streaming">古风少御</option>
                                <option value="BV107_streaming">霸气青叔</option>
                                <option value="BV100_streaming">质朴青年</option>
                                <option value="BV104_streaming">温柔淑女</option>
                                <option value="BV004_streaming">开朗青年</option>
                                <option value="BV113_streaming">甜宠少御</option>
                                <option value="BV102_streaming">儒雅青年</option>
                            </select>
                            <button class="btn btn-primary" id="synthesize-btn">
                                <i class='bx bx-volume-full'></i>
                                合成语音
                            </button>
                        </div>
                    </div>

                    <!-- 合成结果展示区域 -->
                    <div id="synthesis-results">
                        <!-- 结果将动态添加到这里 -->
                    </div>
                </div>
            </div>
        </div>

        </section>
    </main>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/eventsource/1.0.0/eventsource.min.js"></script>
<script defer src="{{ url_for('static',filename='js/chat.js') }}"></script>
<script src="../static/js/nav.js" defer></script>
<script src="../static/js/learn.js" defer></script>
<script src="../static/js/column.js" defer></script>
<script src="../static/js/searchAnswer.js" defer></script>
<script src="../static/js/crypto-js.min.js"></script>
<script src="../static/js/xf-voice-dictation.js"></script>
<script src="../static/js/voice.js" defer></script>
<script src="{{ url_for('static', filename='js/tts.js') }}"></script>
</html>